<template>
  <div class="help-detail">
    <navigationBarVue></navigationBarVue>
    <!-- <div class="over"><h1><img src="../img/yaoqing.png" />求助详情</h1></div>
    <div class="content">
      <div class="info">
        
      </div>
    </div> -->
    <div class="container">
      <el-container>
        <el-header height="">
          <!-- Header content -->
          <el-page-header @back="$router.back()" content="详情页面">
          </el-page-header>
          <el-divider></el-divider>
        </el-header>
        <el-main height="">
          <!-- Main content -->
          <el-row :gutter="40">
            <el-col :span="16">
              <div class="details">
                <p class="title" style="text-align: center">{{ help.title }}</p>
                <p style="text-align: center">
                  <i class="el-icon-user-solid"></i>发表于
                  <i class="el-icon-time"></i> {{ help.createTime }} &bull;
                  <i class="el-icon-view"></i> {{ help.viewCount }} 次围观
                </p>
                <div class="cat">{{ help.categoryName }}</div>
                <el-descriptions
                  :column="2"
                  label-class-name="my-label"
                  content-class-name="my-content"
                >
                  <el-descriptions-item
                    :span="2"
                    content-class-name="detail-content"
                  >
                    <template slot="label">
                      <i class="el-icon-document"></i>&ensp;详细内容
                    </template>
                    {{ help.content ? help.content : "无" }}
                  </el-descriptions-item>
                  <el-descriptions-item :span="2">
                    <template slot="label">
                      <i class="el-icon-location-outline"></i>
                      &ensp;求助地点
                    </template>
                    {{ help.location }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="iconfont icon-zhaopinwangzhan"></i>
                      &ensp;需&ensp;求&ensp;数
                    </template>
                    {{ help.needNum }}&ensp;人
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="iconfont icon-icon-person-hezuo2"></i>
                      &ensp;已&ensp;协&ensp;助
                    </template>
                    {{ help.assistNum }}&ensp;人
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="status-label">
                    <template slot="label">
                      <i class="el-icon-wallet"></i>
                      &ensp;报酬
                    </template>
                    <div class="reward-content">
                      {{ help.reward }}
                      <i class="iconfont icon-chongzhi"></i>
                    </div>
                  </el-descriptions-item>
                  <el-descriptions-item label-class-name="status-label">
                    <template slot="label">
                      <i class="iconfont icon-dingdanzhuangtaidengdai"></i>
                      &ensp;状态
                    </template>
                    <el-tag :type="getTagStatus(help.status)">{{
                      getStatus(help.status)
                    }}</el-tag>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </el-col>

            <el-col :span="7">
              <div class="sidebar">
                <h3 style="padding-left: 40px">求助人信息</h3>
                <el-descriptions
                  :column="1"
                  class="info"
                  content-class-name="info-content"
                >
                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-user"></i>&ensp;昵称
                    </template>
                    {{ creator.nickName || creator.userName }}
                    <i
                      class="iconfont icon-nan"
                      style="color: rgb(0, 145, 255)"
                      v-if="creator.sex == 0 || creator.sex == null"
                    ></i>
                    <i
                      class="iconfont icon-nv"
                      style="color: rgb(255, 77, 148)"
                      v-if="creator.sex == 1"
                    ></i>
                  </el-descriptions-item>

                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-phone-outline"></i>&ensp;联系方式
                    </template>
                    {{ creator.phone }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      <i
                        class="iconfont icon-fangzi"
                        style="font-size: 14px"
                      ></i
                      >&ensp;住址
                    </template>
                    {{ creator.address }}
                  </el-descriptions-item>
                </el-descriptions>
                <el-button
                  ref="takeBtn"
                  class="button"
                  type="primary"
                  :disabled="takeBtnDisable"
                  @click="clickTake"
                  ><i class="el-icon-plus"></i> 接&ensp;取</el-button
                >
                <el-button class="button" type="success" @click="clickContact"
                  ><i class="el-icon-phone"></i> 联&ensp;系</el-button
                >
              </div>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import { getHelpDetail, getCreatorInfo } from "@/api/help";
import { addAssist } from "@/api/assist";
import navigationBarVue from "@/components/navigationBar.vue";
import {updateViewCount} from "@/api/help";
export default {
  name: "VueTaoHelpdetail",
  components: {
    navigationBarVue,
  },
  data() {
    return {
      takeBtnDisable: false,
      helpId: null,
      help: {},
      creator: {},
    };
  },

  mounted() {},

  methods: {
    getDetail() {
      if (this.helpId != null) {
        getHelpDetail(this.helpId).then((res) => {
          this.help = res;
          console.log("求助详情：", res);
        });
      }
    },
    getStatus(status) {
      // console.log(status)
      switch (status) {
        case "0":
          return "待解决";
        case "1":
          return "已完成";
      }
    },
    getTagStatus(status) {
      switch (status) {
        case "0":
          return "warning";
        case "1":
          return "info";
      }
    },
    getUser() {
      getCreatorInfo(this.helpId).then((res) => {
        this.creator = res;
        // console.log("求助者信息：",res)
      });
    },
    addViewCount(){
      updateViewCount(this.helpId).then(()=>{
      })
    },
    clickContact() {
      this.$router.push("/chat?chatTo="+this.creator.id);
    },
    clickTake() {
      this.$confirm("确认接取该求助吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          addAssist(this.helpId)
            .then((res) => {
              this.takeBtnDisable = true;
              this.$set(this.help, "assistNum", this.help.assistNum + 1);
              this.$notify({
                title: "成功",
                message: "接取求助成功",
                type: "success",
              });
            })
            .catch((err) => {
              this.takeBtnDisable = true;
            });
        })
        .catch(() => {
        });
    },
  },
  created() {
    this.helpId = this.$route.query.helpId;
    this.getDetail();
    this.getUser();
    this.addViewCount();
    
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
/* .help-detail {
  width: 100%;
  min-width: 1192px;

}
.over {
  height: 150px;
  background-color: rgb(167, 225, 248);
  box-sizing: border-box;
  padding-top: 25px;
}
h1 {
  letter-spacing: 20px;
  color: white;
  font-size: 40px;
  text-align: center;
}
.over img {
  width: 60px;
  height: 60px;
  vertical-align: middle;
} */
.help-detail {
  width: 100%;
  min-width: 1192px;

}
.container {
  width: 1100px;
  margin: 20px auto;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  background: white;
}
h1 {
  margin-top: 0;
  color: #333;
}
.sidebar {
  padding-left: 20px;
  margin-top: 70px;
}
.sidebar h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #333;
}
.el-button {
  margin-top: 10px !important;
}
.details {
  color: #333;
}
.details p {
  margin: 0;
  margin-bottom: 10px;
}
.details h3 {
  margin: 0;
  margin-bottom: 10px;
  color: #333;
}
.comments {
  margin-top: 20px;
}
.comments textarea {
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  resize: vertical;
}
.comments button {
  margin-top: 10px;
}
div /deep/ .el-page-header__content {
  font-weight: bold;
  font-size: 20px;
}
.title {
  font-size: 24px;
  font-weight: bold;
}
.title + p {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.7);
}
.cat {
  width: 70px;
  height: 25px;
  background-color: deepskyblue;
  color: white;
  text-align: center;
  font-size: 12px;
  line-height: 25px;
  border-radius: 0px 12px 12px 0px;
}
.el-descriptions {
  margin-top: 30px;
}
.my-label {
  font-size: 16px;
  color: black;
  font-weight: bold;
}
.detail-content {
  padding-top: 2px;
  margin-left: 10px;
  min-height: 100px;
}
.my-content {
  padding-top: 2px;
  margin-left: 10px;
  margin-bottom: 20px;
}
.status-label {
  font-size: 16px;
  color: black;
  font-weight: bold;
  line-height: 35px;
}
.info-content {
  margin-left: 5px;
  margin-bottom: 20px;
}
.reward-content {
  line-height: 32px;
}
.icon-chongzhi {
  color: rgb(255, 82, 2);
  margin-left: 5px;
}
.sidebar .iconfont {
  font-size: 14px;
}
</style>